<template>
    <div class="flex flex-col my-2">
        <!--  备用：在线颜色推荐 http://colormind.io/api-access/ -->
        <Checkbox v-model="recommend.chinese" class="flex-none">
            <div class="text-white" @change="updateColor">中国色推荐</div>
        </Checkbox>
        <Checkbox v-model="recommend.copic" class="flex-none">
            <div class="text-white" @change="updateColor">Copic 色推荐</div>
        </Checkbox>
        <div class="flex flex-nowrap flex-col overflow-y-auto items-center w-full my-2">
            <div
                class="h-6 m-1 px-2 whitespace-nowrap text-sm rounded cursor-pointer"
                :style="{ background: chroma.rgb(...color.rgb).css() }"
                v-for="color in recommendColor"
                @click="store.setColor(color.rgb)"
            >
                <span class="bg-clip-text mix-blend-difference invert">{{ color.name }}</span>
            </div>

            <div v-show="recommendColor.length === 0" class="text-white">没有匹配到颜色</div>
        </div>
    </div>
</template>

<style scoped>
</style>

<script lang="ts" setup>
import chroma from 'chroma-js';
import { Checkbox } from 'vant';
import { computed, reactive, ref, watch } from 'vue';
import { useColorPanelStore } from '../store';
import ChineseColor from '../../../../package/similar-color/src/chinese.json'
import CopicColor from '../../../../package/similar-color/src/copic.json'
const store = useColorPanelStore()

const recommend = reactive({
    chinese: true,
    copic: false
})


const colors = computed(() => {
    let collection = []
    recommend.chinese && collection.push(ChineseColor)
    recommend.copic && collection.push(CopicColor)
    return collection.flat().sort((a, b) =>
        a.rgb[0] - b.rgb[0]
    )
})
type palletColors = { name: string, distance: number, rgb: [number, number, number] }[]
const recommendColor = ref([] as palletColors)
const updateColor = () => {
    if (store.sideBar && Object.values(recommend).some(i => i)) {
        recommendColor.value = store.transToStandard(colors.value) as palletColors
    }
}
watch(() => store.usingColor, updateColor)
updateColor()

</script>
